<template>
    <div>
        <el-card>
            <el-row :getter="24">
                <el-col :span="3">
                    <el-select v-model="searchInfo.keyword" placeholder="请选择">
                        <el-option label="文件名" value="name"></el-option>
                        <el-option label="文件类型" value="type"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="6">
                    <el-input placeholder="请输入内容" v-model="searchInfo.query" clearable @clear="getTableData"></el-input>
                </el-col>
                <el-col :span="2">
                    <el-button type="primary" @click="getTableData">查询</el-button>
                </el-col>
                <el-col :span="9">
                    <el-button plain icon="el-icon-refresh" type="primary" @click="refersh">刷新</el-button>
                </el-col>
                <el-col :span="4">
                    <el-upload
                        class="upload-demo right"
                        :action="domain+'/file/uploadFile'"
                        :on-success="uploadSuccess"
                        :headers="{ 'x-token': token }"
                        multiple
                        :limit="1"
                        :on-exceed="handleExceed"
                        :file-list="uploadFilelist">
                    <el-button type="success">点击上传</el-button>
                </el-upload>
                </el-col>
            </el-row>
            <el-table :data="tableData" border stripe header-row-class-name="table_header" :header-cell-style="table_header">
                <el-table-column type="index" label="序号" width="100px" align="center"></el-table-column>
                <el-table-column label="文件名" prop="name" align="center" min-width="200px">
                    <template slot-scope="scope">
                        <a style="color: blue;" :href="domain+scope.row.path" target="_blank">{{scope.row.name}}</a>
                    </template>
                </el-table-column>
                <el-table-column label="类型" prop="type" align="center" width="120px"></el-table-column>
                <el-table-column label="大小" prop="size" align="center" width="120px"></el-table-column>
                <el-table-column label="上传时间" prop="CreatedAt" align="center" min-width="200px">
                    <template slot-scope="scope">
                        {{scope.row.CreatedAt | parseTime }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="250px">
                    <template slot-scope="scope">
                        <el-link target="_blank" :underline="false" style="margin-left:15px">
                                <el-button size="mini" type="primary" @click="showRenameDialog(scope.row)">重命名</el-button>
                        </el-link>
                        <el-link target="_blank" :underline="false" style="margin-left:15px">
                            <!--     <el-button size="mini" type="warning" @click="download(scope.row)"> -->
								<el-button>
									<a style="color: blue" :href="domain+scope.row.path" target="_blank">下载</a>
								</el-button>
                        </el-link>
                        <el-link target="_blank" :underline="false" style="margin-left:15px">
                                <el-button size="mini" type="danger" @click="deleteFile(scope.row)">删除</el-button>
                        </el-link>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页区域 -->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-sizes="[2, 5, 10, 15]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    background
                    hide-on-single-page
            ></el-pagination>
        </el-card>
        <el-dialog
                title="文件重命名"
                :visible.sync="RenameDialogVisible"
                width="40%"
                @close="resetForm('FileFormRef')"
                :close-on-click-modal="false"
        >
            <el-form
                    :model="FileForm"
                    ref="FileFormRef"
                    label-width="100px">
                <el-form-item label="当前文件名: ">
                    {{FileForm.name}}
                </el-form-item>
                <el-form-item label="新文件名">
                    <el-input v-model="newFileName"></el-input>
                </el-form-item>
            </el-form>
                <span slot="footer" class="dialog-footer">
                        <el-button @click="RenameDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="SaveFileInfo">确 定</el-button>
                </span>
        </el-dialog>
    </div>
</template>

<script>
	import {getFileList, downloadFile, updateFileName, deleteFile} from '@/api/fileUploadAndDownload'
	import { mapGetters } from "vuex";
	import infoList from "@/mixins/infoList";
	import { downloadImage } from "@/utils/downloadImg";
  export default {
	  name: "Upload",
	  mixins: [infoList],
      data(){
          return {
              uploadFilelist: [],
			  listApi: getFileList,
              tableData: [],
              RenameDialogVisible: false,
              FileForm: {},
              newFileName: '',
          }
      },
	  computed: {
	    ...mapGetters("user", ["userInfo", "token"]),
	  },
      created(){
		   this.getTableData();
      },
      methods:{
          uploadSuccess(response, file, fileList) {
              this.uploadFilelist = [];
              this.getTableData();
              this.$message.success("上传成功");
          },
          handleExceed(files, fileList) {
              this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
          },
          table_header(row, column, rowIndex, columnIndex){
              return 'background-color: #409EFF; color:white;font-size: 14px'
          },
          handleSizeChange (newSize) {
              this.queryInfo.pageSize = newSize;
              this.getTableData()
          },
          handleCurrentChange (newSize) {
              this.queryInfo.pageNum = newSize;
              this.getTableData()
          },
          resetForm(formName){
              this.FileForm = {};
              this.$refs[formName].resetFields();
          },
          showRenameDialog(file){
              this.FileForm = file;
              this.RenameDialogVisible = true;
          },
          refersh(){
              this.getTableData();
              this.$message.success("刷新成功");
          },
          async download(file){
			downloadImage(this.domain + file.path, file.name);
		  },
          async deleteFile(file){
              const confirmResult = await this.$confirm(
                  '此操作将永久删除该文件, 是否继续?',
                  '提示',
                  {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning'
                  }
              ).catch(err => err);
              if (confirmResult !== 'confirm') {
                  return this.$message.info('已取消删除')
              }
              const res = await deleteFile(file);
              if (res.code !== 0) return this.$message.error('删除文件失败！');
              this.$message.success('删除文件成功！');
			  this.getTableData();
          },
          async SaveFileInfo(){
            if (this.newFileName === ''){
                return this.$message.error("新文件名不能为空")
            }
            const res = await updateFileName({"id": this.FileForm.ID,"newFileName": this.newFileName});
            if (res.code !== 0) return this.$message.error("重命名失败");
            this.$message.success("重命名成功");
            this.RenameDialogVisible = false;
            this.getTableData();
          }
      },
  }
</script>

<style lang="scss" scope>
a{
 text-decoration: none;
    cursor: pointer;
}
</style>